<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
		<style type="text/css">
			table{
				text-align: center;
				margin: 10px auto;
			}
			#a{
				margin-left: 68%;
			}
			#add{
				width: 50px;
				height: 28px;
			}
			tr{
				height: 40px;
			}
			h3{
				margin-left: 30%;
			}
			#sum{
				border: 0;
				outline: none;
			}
		</style>
	</head>
	<body>
		<a href="8-06练习二.html" id="a">
			<button type="button" onclick="add()" id="add">添加</button>
		</a>
		<table border="1" width="600px" id="mytable">
			<thead>
				<tr>
					<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
					<th>书籍名称</th>
					<th>出版日期</th>
					<th>价格</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<p>
			<h3>总价为：￥</h3>
			<input type="text" name="" id="sum" value="" />
		</p>
		
		<script type="text/javascript">
			//对象
			//匿名对象
			//对象里面有属性，属性有值。key：value，属性：值
			let arr = [
				{BookName:"《三国演义》",time:"1899-08",price:"699.99",desc:"1"},
				{BookName:"《水浒传》",time:"1863-09",price:"699.99",desc:"1"},
				{BookName:"《红楼梦》",time:"1884-03",price:"699.99",desc:"1"},
				{BookName:"《西游记》",time:"1900-07",price:"699.99",desc:"1"}
			];
			//获取table对象
			let table = document.getElementsByTagName("table")[0];
			let tbody = table.getElementsByTagName("tbody")[0];
			// console.log(tbody);//打印
			update();

			/* 增 */
			// function add(){
			// 	clear();
			// 	arr.push({BookName:"java",time:"1998-12",price:9.90,desc:"1"});
			// 	update();
			// }

			/* 清除表格内容 */
			function clear(){
				let trs = tbody.children;
				for(let index in trs){
					tbody.remove(trs[index]);
				}
				tbody = document.createElement("tbody");
				table.appendChild(tbody);
			}
	
			function update(){
				for(let index in arr){
					let item = arr[index];
					// 遍历
					let tr = document.createElement("tr");
					tbody.appendChild(tr);
					
					let td = document.createElement("td");
					td.innerText = item.desc;
					tr.appendChild(td);
					
					td = document.createElement("td");
					// td.innerText = item.BookName;
					tr.appendChild(td);
					let a = document.createElement("a");
					a.innerText = item.BookName;
					td.appendChild(a);
					
					td = document.createElement("td");
					td.innerText = item.time;
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerText = item.price;
					tr.appendChild(td);
					
					td = document.createElement("td");
					// <button onclick="pluscount()">+</button> 
					// <button onclick="reduce()">-</button>
					td.innerHTML=`
						<input class="reduce" name="" type="button" value="-" />
						<input type="text" id="num" class="num" value="1" style="width: 20px;text-align: center;"/>
						<input class="add" name="" type="button" value="+" />
					`;
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerHTML=`
						<a href="8-06练习二.html"><button>编辑</button></a>
						<button onclick="del(${index})">删除</button>
					`;
					tr.appendChild(td);
				}
			}
			//删除
			function del(index){
				console.log(index);
				arr.splice(index,1);
				clear();
				update();
			}
			//增加
			// function pluscount(index){
			// 	//得到input输入框
			// 	var i = document.getElementById("num");
			// 	//将value的字符串类型转换为数字类型
			// 	var value = parseInt(i.getAttribute("value"));
			// 	//规定最大值为10
			// 	if (value < 10 ){
			// 		i.setAttribute("value",++value);
			// 	}
			// }
			
			//减少
			// function reduce(index){
			// 	var i = document.getElementById("num");
			// 	var value = parseInt(i.getAttribute("value"));
			// 	//最小值为0
			// 	if (value > 0 ){
			// 		i.setAttribute("value",--value);
			// 	}
			// }
			
			$(function(){
				$(".add").click(function(){
					var t=$(this).parent().find('input[class*=num]');
					t.val(parseInt(t.val())+1)
					//上限是10
					if(parseInt(t.val()) >10 ){
						t.val(10);
					}
					// setTotal();
				})
				$(".reduce").click(function(){
					var t=$(this).parent().find('input[class*=num]');
					t.val(parseInt(t.val())-1)
					//最低为0
					if(parseInt(t.val())<0){
						t.val(0);
					}
					// setTotal();
				})
				// //计算总价
				function total() {
					//得到所有的数量
					var counts=document.getElementsByName("num");
					//得到所有的单价
					var prices=document.getElementsByName("price");
					var sumMoney=0;
					sumMoney+=parseFloat(prices[i])*parseInt(counts[i]);
					//把总金额显示再指定的元素中
					document.getElementById("sum").innerHTML="¥："+sumMoney;
					console.log(sumMoney);
				}
			})
		</script>
	</body>
</html>
